import React from 'react';
import dynamic from 'umi/dynamic';
import QueueAnim from 'rc-queue-anim';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Card, Row, Col, } from 'antd';

const Step1 = ({ brief = '', GoodsPrizes = [], GoodsFigures = [] }) =>
  (
    <QueueAnim delay={300}>
      <Card title="详情" bordered={false} bodyStyle={{padding: 16}} key="primary">
        <QueueAnim delay={500} component={Row} gutter={16}>
          {
            GoodsPrizes.map((item, key) => 
              <Col xl={6} lg={8} md={12} sm={12} xs={24} key={item.id}>
                <Card
                  cover={<img alt="image cover" src={item.cover + IMAGE_STYLE} />}
                  bodyStyle={{padding: 16}}
                >
                  <h3 className="ellipsis-2" style={{height: 72}}>奖品{key + 1}：{item.title}</h3>
                  <h3 style={{marginBottom: 0}}>奖品数量：<span style={{fontSize: 26}}>{item.number}</span></h3>
                </Card>
              </Col>
            )
          }
        </QueueAnim>
      </Card>

      <OverPack playScale={0.1}>
        <QueueAnim delay={300} component={Card} title="说明" bordered={false} bodyStyle={{padding: 16}} style={{ marginTop: 16, marginBottom: 16 }} key="explain">
          <p key="p1">{brief}</p>
        </QueueAnim>
      </OverPack>

      <Card title="介绍" bordered={false} bodyStyle={{padding: 16}} key="intros">
        <OverPack playScale={0.1}>
          <QueueAnim type={['bottom', 'top']} delay={300} component={Row} gutter={16}>
            {
              Array.isArray(GoodsFigures) && GoodsFigures.map((item) => 
                <Col span={6} key={item.id}>
                  <Card
                    cover={<img alt="explain image" src={item.image} />}
                    bodyStyle={{padding: 16}}
                  >
                    <h3 className="ellipsis-2" style={{height: 72}}>{item.figcaption}</h3>
                  </Card>
                </Col>
              )
            }
          </QueueAnim>
        </OverPack>
      </Card>
    </QueueAnim>
  );

export default dynamic({
  loader: async () => (payload) => <Step1 {...payload} />
});